<div class="lx-step-nav" ng-click="lxStepNav.parent.goToStep(lxStepNav.step.index)" ng-class="lxStepNav.getClasses()" lx-ripple>
    <div class="lx-step-nav__indicator lx-step-nav__indicator--index" ng-if="lxStepNav.step.isValid === undefined">
        <span>{{ lxStepNav.step.index + 1 }}</span>
    </div>

    <div class="lx-step-nav__indicator lx-step-nav__indicator--icon" ng-if="lxStepNav.step.isValid === true">
        <lx-icon lx-id="check" ng-if="!lxStepNav.step.isEditable"></lx-icon>
        <lx-icon lx-id="pencil" ng-if="lxStepNav.step.isEditable"></lx-icon>
    </div>

    <div class="lx-step-nav__indicator lx-step-nav__indicator--error" ng-if="lxStepNav.step.isValid === false">
        <lx-icon lx-id="alert"></lx-icon>
    </div>

    <div class="lx-step-nav__wrapper">
        <div class="lx-step-nav__label">
            <span>{{ lxStepNav.step.label }}</span>
        </div>

        <div class="lx-step-nav__state">
            <span ng-if="(lxStepNav.step.isValid === undefined || lxStepNav.step.isValid === true) && lxStepNav.step.isOptional">{{ lxStepNav.parent.labels.optional }}</span>
            <span ng-if="lxStepNav.step.isValid === false">{{ lxStepNav.step.errorMessage }}</span>
        </div>
    </div>
</div>